﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="/js/index.min.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/vue.min.js"></script>
    <script src="/js/index.min.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="8" v-for="p in productlist">
            <el-card>
                <img :src="p.imgsrc" style="width:100%">
                <div>{{p.name}}</div>
                <div>
                    <el-button @click="addToCart(p);">加入<i class="el-icon-shopping-cart-2"></i></el-button>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            productlist: []
        },
        methods: {
            showProductList() {
                let that = this;
                $.post("/product/selectSkuList",  function (d) {
                    if (d == "global-exception") {
                        that.$alert("请先登录");
                    }
                    app.productlist = d;
                });
            },
            addToCart(p) {
                console.log(p)
                let that = this;
                $.post("/cart/addToCart", p, function (d) {

                    if (d == "global-exception") {
                        that.$alert("请先登录");
                    }
                    that.$alert("加入成功");
                });
            }
        },
        mounted(){
            this.showProductList()
        }
    });
</script>
</body>
</html>